<template>
  <el-row class="tac">
    <el-col >
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        router>
<!--            这里用router后item就可以通过index进行路由跳转      -->
<!--        index必须唯一  -->
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-document"></i>
            <span >教学计划</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/plan">选项1</el-menu-item>
            <el-menu-item index="/plan">选项2</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-reading"></i>
            <span >教学资源</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/resource">选项1</el-menu-item>
            <el-menu-item index="/resource">选项2</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-message-solid"></i>
            <span >课程公告</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/class">选项1</el-menu-item>
            <el-menu-item index="/class">选项2</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span >竞赛活动</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/competition"> 公告列表</el-menu-item>
            <el-menu-item index="/competitionEdit" > 编写公告</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-question"></i>
            <span >常见问题</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/question">问题列表</el-menu-item>
            <el-menu-item index="/class">选项2</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
<!--        <el-menu-item index="/plan">-->
<!--        <i class="el-icon-document"></i>-->
<!--        <span slot="title">教学计划</span>-->
<!--      </el-menu-item>-->
<!--        <el-menu-item index="/resource">-->
<!--          <i class="el-icon-reading"></i>-->
<!--          <span slot="title">教学资源</span>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="/class" >-->
<!--          <i class="el-icon-message-solid"></i>-->
<!--          <span slot="title">课程公告</span>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="/competition">-->
<!--          <i class="el-icon-s-opportunity"></i>-->
<!--          <span slot="title">竞赛活动</span>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="/question">-->
<!--          <i class="el-icon-question"></i>-->
<!--          <span slot="title">常见问题</span>-->
<!--        </el-menu-item>-->
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
export default {
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
    //  路由跳转push
    // pushToPlan () {
    //   this.$router.push({
    //     name: 'plan'
    //   })
    // }
  }
}
</script>
